import React, { PureComponent } from 'react'
import { withRouter } from 'react-router-dom'
import { connect } from "react-redux";
import { message } from 'antd';
import wishAction from '../../redux/action/wishAction'
import request from '../../api/api'
import Like from '../../components/MovieDes/Like/Like'
import Picture from '../../components/MovieDes/Picture/Picture'
import Star from '../../components/MovieDes/Star/Star'
import './MovieDes.scss'

class MovieDes extends PureComponent {
    state = {
        arr: {},
        arrPhotos: [],
        arrCelebrities: [],
        arrLike: [],
        isWish: false
    }
    goVdo = () => {
        let { movieId } = this.props
        this.props.history.push(`/vdoplay/${movieId}`)
    }
    goBack = () => {
        this.props.history.goBack()
    }
    getVal = () => {
        let { movieId } = this.props
        request({
            url:`/api/maoyan/movie/detail?movieId=${movieId}`,
            method:'get'
        }).then(res => {
            let data = res.movie
            let photos = res.movie.photos
            let celebrities = res.celebrities
            celebrities.forEach((element) => {
                if (element.avatar.search("w.h") !== -1) {
                    element.avatar =
                        element.avatar.split("w.h")[0] +
                        "80.120" +
                        element.avatar.split("w.h")[1];
                }
            });
            photos.forEach((element) => {
                if (element.search("/w.h/") !== -1) {
                    element =
                        element.split("/w.h/")[0] + "/80.120/" + element.split("/w.h/")[1];
                }
            })
            this.setState({
                arr: data,
                arrPhotos: photos,
                arrCelebrities: celebrities
            })
        })
    }
    getlike = () => {
        let { like } = this.props
        request({
            url:`/api/maoyan/search/movies?keyword=${like}&ci=1`,
            method:'get'
        }).then(res => {
            this.setState({
                arrLike: res
            })
        })
    }
    getWish = () => {
        if (!this.state.isWish) {
            this.props.wishAction('wish',this.state.arr)
            this.setState({
                isWish: true
            })
            message.success('添加到想看')
        }else{
            this.props.wishAction('dewish',this.state.arr.id)
            this.setState({
                isWish: false
            })
            message.success('取消想看')
        }
    }
    componentDidMount() {
        let { movieId, wishlist } = this.props
        wishlist.forEach(el => {
            if (el.id + '' === movieId) {
                this.setState({
                    isWish: true
                })
            }
        })
        this.getVal()
        this.getlike()
    }
    render() {
        let { arr, arrPhotos, arrCelebrities, arrLike, isWish } = this.state
        return (
            <div className='moviedes'>
                <div id="box">
                    <header className="h">
                        <svg onClick={this.goBack}
                            t="1640051219559"
                            className="icon"
                            viewBox="0 0 1024 1024"
                            version="1.1"
                            xmlns="http://www.w3.org/2000/svg"
                            p-id="3717"
                            width="30"
                            height="30"
                        >
                            <path
                                d="M624.788992 204.047974 585.205965 164.464026 219.560038 530.185011 585.205965 895.864013 624.788992 856.280986 298.663014 530.16105Z"
                                p-id="3718"
                                fill="#ffffff"
                            ></path>
                        </svg>
                        <p>电影</p>
                        <svg
                            t="1640051277058"
                            className="icon"
                            viewBox="0 0 1024 1024"
                            version="1.1"
                            xmlns="http://www.w3.org/2000/svg"
                            p-id="4583"
                            width="20"
                            height="20"
                        >
                            <path
                                d="M972.8 549.9136v294.7584A128.0768 128.0768 0 0 1 844.8 972.8H179.2a128 128 0 0 1-128-128V179.2c0-70.7328 57.1904-128 127.872-128h202.3168a25.6 25.6 0 0 0 0-51.2H179.072A179.072 179.072 0 0 0 0 179.2v665.6a179.2 179.2 0 0 0 179.2 179.2h665.6c98.944 0 179.2-80.2816 179.2-179.328V549.9136a25.6 25.6 0 0 0-51.2 0z"
                                p-id="4584"
                                fill="#ffffff"
                            ></path>
                            <path
                                d="M960 128c-353.4592 0-640 286.5408-640 640a25.6 25.6 0 0 0 51.2 0c0-325.1968 263.6032-588.8 588.8-588.8a25.6 25.6 0 0 0 0-51.2z"
                                p-id="4585"
                                fill="#ffffff"
                            ></path>
                            <path
                                d="M720.1024 62.1568l256 102.4a25.6 25.6 0 0 0 18.9952-47.5136l-256-102.4a25.6 25.6 0 0 0-18.9952 47.5136z"
                                p-id="4586"
                                fill="#ffffff"
                            ></path>
                            <path
                                d="M808.8064 348.4672l194.6368-189.312a25.6 25.6 0 1 0-35.6864-36.7104L773.12 311.7568a25.6 25.6 0 1 0 35.6864 36.7104z"
                                p-id="4587"
                                fill="#ffffff"
                            ></path>
                        </svg>
                    </header>
                    <div>
                        <div className="des">
                            <div onClick={this.goVdo}>
                            <div className="con">
                                <svg
                                    t="1640142160040"
                                    className="icon"
                                    viewBox="0 0 1024 1024"
                                    version="1.1"
                                    xmlns="http://www.w3.org/2000/svg"
                                    p-id="7884"
                                    width="20"
                                    height="20"
                                >
                                    <path
                                        d="M166.4 806.4V217.6c0-68.266667 72.533333-110.933333 128-76.8l512 294.4c59.733333 34.133333 59.733333 123.733333 0 157.866667l-512 294.4c-55.466667 29.866667-128-12.8-128-81.066667z"
                                        p-id="7885"
                                        data-spm-anchor-id="a313x.7781069.0.i5"
                                        className="selected"
                                        fill="#2c2c2c"
                                    ></path>
                                </svg>
                            </div>
                            <img alt="" width="110" height="150" src={arr.img} />
                            </div>
                            <div className="text">
                                <h3>{arr.nm}</h3>
                                <p>{arr.filmAlias}</p>
                                <p>{arr.cat}</p>
                                <p>{arr.onlineDate}</p>
                                <div className="des-btn">
                                    <span onClick={this.getWish}
                                    ><svg
                                        t="1640053032907"
                                        className="icon"
                                        viewBox="0 0 1024 1024"
                                        version="1.1"
                                        xmlns="http://www.w3.org/2000/svg"
                                        p-id="6294"
                                        width="13"
                                        height="13"
                                    >
                                            <path
                                                d="M32 407.584a279.584 279.584 0 0 1 480-194.944 279.584 279.584 0 0 1 480 194.944 278.144 278.144 0 0 1-113.024 224.512L562.592 892.8a96 96 0 0 1-124.416-1.952l-308.16-270.688A278.976 278.976 0 0 1 32 407.584z"
                                                p-id="6295"
                                                fill={isWish ? '#e54847' : '#ffffff'}
                                            ></path></svg>想看</span>
                                    <span
                                    ><svg
                                        t="1640052958986"
                                        className="icon"
                                        viewBox="0 0 1024 1024"
                                        version="1.1"
                                        xmlns="http://www.w3.org/2000/svg"
                                        p-id="5440"
                                        width="13"
                                        height="13"
                                    >
                                            <path
                                                d="M781.186088 616.031873q17.338645 80.573705 30.59761 145.848606 6.119522 27.537849 11.219124 55.075697t9.689243 49.976096 7.649402 38.247012 4.079681 19.888446q3.059761 20.398406-9.179283 27.027888t-27.537849 6.629482q-5.099602 0-14.788845-3.569721t-14.788845-5.609562l-266.199203-155.027888q-72.414343 42.836653-131.569721 76.494024-25.498008 14.278884-50.486056 28.557769t-45.386454 26.517928-35.187251 20.398406-19.888446 10.199203q-10.199203 5.099602-20.908367 3.569721t-19.378486-7.649402-12.749004-14.788845-2.039841-17.848606q1.01992-4.079681 5.099602-19.888446t9.179283-37.737052 11.729084-48.446215 13.768924-54.055777q15.298805-63.23506 34.677291-142.788845-60.175299-52.015936-108.111554-92.812749-20.398406-17.338645-40.286853-34.167331t-35.697211-30.59761-26.007968-22.438247-11.219124-9.689243q-12.239044-11.219124-20.908367-24.988048t-6.629482-28.047809 11.219124-22.438247 20.398406-10.199203l315.155378-28.557769 117.290837-273.338645q6.119522-16.318725 17.338645-28.047809t30.59761-11.729084q10.199203 0 17.848606 4.589641t12.749004 10.709163 8.669323 12.239044 5.609562 10.199203l114.231076 273.338645 315.155378 29.577689q20.398406 5.099602 28.557769 12.239044t8.159363 22.438247q0 14.278884-8.669323 24.988048t-21.928287 26.007968z"
                                                p-id="5441"
                                                fill="#ffffff"
                                            ></path></svg>看过</span>
                                </div>
                            </div>
                        </div>
                        <div className="wish">
                            <span className="z">
                                <svg
                                    t="1640070301361"
                                    className="icon"
                                    viewBox="0 0 1024 1024"
                                    version="1.1"
                                    xmlns="http://www.w3.org/2000/svg"
                                    p-id="4270"
                                    width="13"
                                    height="13"
                                >
                                    <path
                                        d="M1015.2 395.2c-4-12.8-17.6-19.2-30.4-15.2l-17.6 5.6C772 376.8 602.4 252.8 534.4 69.6c-4.8-12.8-18.4-18.4-31.2-14.4-12.8 4.8-18.4 18.4-14.4 31.2C552 255.2 693.6 378.4 864 419.2l-148 48.8c-67.2-32.8-128-76-180-130.4V272c0-13.6-10.4-24-24-24s-24 10.4-24 24v65.6c-25.6 26.4-53.6 51.2-83.2 72.8-10.4 8-12.8 23.2-5.6 33.6 8 10.4 22.4 12.8 33.6 5.6 19.2-13.6 37.6-28.8 55.2-44.8v122.4L159.2 419.2c53.6-12.8 104.8-33.6 152-62.4 11.2-7.2 15.2-21.6 8-32.8-7.2-11.2-21.6-15.2-32.8-8-69.6 42.4-148.8 66.4-229.6 69.6l-17.6-5.6c-12.8-4-26.4 2.4-30.4 15.2-4 12.8 2.4 26.4 15.2 30.4l21.6 6.4c34.4 27.2 64 59.2 89.6 95.2 25.6 36 46.4 76 61.6 118.4 15.2 41.6 24 84.8 27.2 129.6 0.8 12.8 11.2 22.4 24 22.4h1.6c13.6-0.8 23.2-12.8 22.4-25.6-3.2-48.8-13.6-96-29.6-142.4-16.8-46.4-39.2-90.4-68-130.4-8-11.2-16.8-22.4-25.6-33.6L296 514.4c35.2 65.6 57.6 136 67.2 209.6l-184 253.6c-8 10.4-5.6 25.6 5.6 33.6 4 3.2 8.8 4.8 14.4 4.8 7.2 0 14.4-3.2 19.2-9.6l32.8-45.6c159.2-101.6 362.4-100.8 520.8 0.8v0.8l32 44.8c4.8 6.4 12 9.6 19.2 9.6 4.8 0 9.6-1.6 14.4-4.8 10.4-8 12.8-22.4 5.6-33.6l-26.4-36.8v-1.6c-52.8-187.2 10.4-385.6 161.6-507.2l20.8-6.4c12.8-5.6 20-18.4 16-31.2zM550.4 572.8L664 535.2c-19.2 43.2-33.6 88-43.2 134.4l-70.4-96.8z m101.6-84L536 527.2V404c36 32.8 74.4 60.8 116 84.8z m-292.8 46.4l137.6 44.8L580.8 696c-45.6-4.8-92-4.8-138.4 0l32.8-44.8c8-10.4 5.6-25.6-5.6-33.6-10.4-8-25.6-5.6-33.6 5.6l-33.6 46.4c-9.6-46.4-24-91.2-43.2-134.4z m399.2 361.6c-138.4-72-301.6-80-444.8-22.4l90.4-124.8c71.2-12 144.8-12 216 0l44 60.8c4.8 6.4 12 9.6 19.2 9.6 4.8 0 9.6-1.6 14.4-4.8 10.4-8 12.8-22.4 5.6-33.6l-42.4-58.4c9.6-73.6 32.8-144 67.2-209.6l148-48.8c-100 120-144 277.6-117.6 432z"
                                        fill="#ffffff"
                                        p-id="4271"
                                    ></path>
                                    <path
                                        d="M384 272m-24 0a24 24 0 1 0 48 0 24 24 0 1 0-48 0Z"
                                        fill="#ffffff"
                                        p-id="4272"
                                    ></path>
                                </svg>
                                蜘蛛想看</span>
                            <span className="w">{arr.wish}</span>人想看
                        </div>
                        <div className="intr">
                            <h4>简介</h4>
                            <p>{arr.dra == null ? "暂无剧情简介" : arr.dra}</p>
                        </div>
                        <Star arrCelebrities={arrCelebrities} />
                        <Picture arrPhotos={arrPhotos} />
                        <Like arrLike={arrLike} />
                    </div >
                </div >
            </div>
        )
    }
}
export default connect(
    state => ({
        wishlist: state.wish
    }),
    {
        wishAction
    }
)(withRouter(MovieDes))